<template>
    <div id="addcard">
        <div v-show="lang=='zh'" class="txt">请务必填写真实信息，否则将无法到账</div>
        <div  v-show="lang=='en'" class="txt">Please fill in the real information, otherwise you will not be able to reach the account</div>
        <div class="linebox">
            <div  v-show="lang=='zh'" class="name">持卡人</div>
            <div  v-show="lang=='en'" class="name">Holder</div>
            <input v-show="lang=='zh'" type="txt" v-model="name"  placeholder="请输入持卡人真实姓名">
            <input v-show="lang=='en'" type="txt" v-model="name"  placeholder="Please input cardholder's real name">
        </div>
        <div class="linebox">
            <div  v-show="lang=='zh'" class="name">银行卡号</div>
            <div  v-show="lang=='en'" class="name">Num</div>
            <input v-show="lang=='zh'" type="txt" v-model="cardnum"  placeholder="请输入银行卡号（不支持信用卡）">
            <input v-show="lang=='en'" type="txt" v-model="cardnum"  placeholder="Bank Card Number (not credit card)">
        </div>
        <div class="linebox">
            <div  v-show="lang=='zh'" class="name">开户行</div>
            <div  v-show="lang=='en'" class="name">Deposit</div>
            <input  v-show="lang=='zh'" type="text" v-model="bank" @click="select" placeholder="请选择开户行" readonly="readonly" onfocus='this.blur();'  ref="location" />
            <input  v-show="lang=='en'" type="text" v-model="bank" @click="select" placeholder="Please choose your account" readonly="readonly" onfocus='this.blur();'  ref="location" />
            <img class="jiantou" src="http://img.xianyufanshen.net//my/jiantou_gerenzhongxin@2x.png"/>
            <!-- title="请选择开户行" -->
            <van-popup v-model="show" position="bottom" :overlay="false">
                <van-picker v-show="lang=='zh'" show-toolbar
                    :columns="columns"
                    @cancel="onCancel"
                    @confirm="onConfirm" />
                    <van-picker v-show="lang=='en'" show-toolbar
                    title="choose account"
                    :columns="columns"
                    @cancel="onCancel"
                    @confirm="onConfirm" />
            </van-popup>
        </div>
        <div class="linebox">
            <div  v-show="lang=='zh'" class="name">开户支行</div>
            <div  v-show="lang=='en'" class="name">Branch</div>
            <input v-show="lang=='zh'" type="txt" v-model="openbranch"  placeholder="请输入开户支行名称">
            <input v-show="lang=='en'" type="txt" v-model="openbranch"  placeholder="Enter the name of the branch bank">
        </div> 

        <div  v-show="lang=='zh'" class="submit" @click="submit">确认绑定</div>
        <div  v-show="lang=='en'" class="submit" @click="submit">Confirm binding</div>
    </div>
</template>
<script>
import { Toast,Picker,Popup  } from 'vant';
import { postAddCard , getcardTypeList } from '@/api/my/card';
export default {
    name:'addcard',
    //声明组件
    components:{
        [Toast.name]:Toast,
        [Picker.name]:Picker,
        [Popup.name]:Popup,
    },
    data (){
        return{
            lang:'zh',
            show:false,  //显示选择器
            lang:"zh",  //zh 中文  en  英文
            userId:0, //用户ID
            name:'',  //持卡人姓名
            cardnum:'',  //银行卡号
            bank:'',  //开户行
            bankId:0,//开户行ID
            openbranch:'',  //开户支行
            columns: [],
            bankIdList:[],
        }
    },
    //实例创建完成后被立即调用
    created (){
        //获取用户ID
        this.getUserId();
        //语言环境
        this.getLang();
        //获取银行类型
        this.getTypeList();
    },
    //监听
    watch:{

    },
    //计算属性
    computed:{

    },
    //
    methods:{
        getLang(){
            if(this.$route.query.lang){
    			this.lang = this.$route.query.lang;
    		}
        },
        getUserId(){
            if(this.$route.query.userId && this.$route.query.userId > 0){
    			this.userId = this.$route.query.userId;
    		}else{
                //获取缓存内的用户ID
                this.userId = window.localStorage.getItem("userId");
            }
        },
        //获取银行类型列表
        getTypeList(){
            getcardTypeList(this.lang).then(res=>{
				if(res.code==200){
					if(res.data.length > 0){
                        var list = res.data;
                        for(let i=0;i<list.length;i++){
                            var name = list[i].bank_name;
                            this.columns = this.columns.concat(name);
                            var id = list[i].id;
                            this.bankIdList = this.bankIdList.concat(id);
                        }
						console.log(this.columns)
						//this.loading = false;
					}else{
						this.loading = false;
					}
                }else{
                    Toast(res.msg)
                }
            });
        },
        //切换开户行
        select(){
            this.show = true;
        },
        onConfirm(value, index) {
            //Toast(`当前值：${value}, 当前索引：${index}`);
            this.bank = value;
            this.show = false;
            this.bankId = this.bankIdList[index];
        },
        onCancel() {
            //Toast('取消');
            this.show = false;
        },
        //切换
        onChange(picker, value, index) {
            //Toast(`当前值：${value}, 当前索引：${index}`);
            this.bank = value;
            this.show = false;
        },
        //确认绑定
        submit(){
            //先判断条件
            if(this.name == ''){
                if(this.lang == "zh"){
                    Toast("请输入持卡人真实姓名");
                }else{
                    Toast("Please input cardholder's real name.");
                }
                return false;
            }else
            if(this.cardnum == ''){
                if(this.lang == "zh"){
                    Toast("请输入银行卡卡号");
                }else{
                    Toast("Please enter bank card number.");
                }
                return false;
            }else
            if(this.bankId == ''){
                if(this.lang == "zh"){
                    Toast("请选择银行开户行");
                }else{
                    Toast("Please choose bank account.");
                }
                return false;
            }else
            if(this.openbranch == ''){
                if(this.lang == "zh"){
                    Toast("请输入银行开户支行");
                }else{
                    Toast("Please enter bank account branch.");
                }
                return false;
            }else{
                //调接口
                postAddCard(this.userId,this.bankId,this.name,this.cardnum,this.lang).then(res=>{
                    if(res.code==200){
                        if(this.lang == "zh"){
                            Toast("增加成功！")
                        }else
                            Toast("Add Success！")
                        let _this = this;
                        setTimeout(function(){ 
                            //返回上一页
                            var para = {};
                            para.isRefresh = true;
                            _this.interaction.hReturn(para);		
                        }, 2000);
                    }else{
                        Toast(res.msg)
                    }
                });
            }
            
        },
    }
    
}
</script>

<style lang="stylus" scoped>
*{
    box-sizing :border-box;
}
#addcard{
    .txt{
        padding : 0 .266667rem;
        background:#f1f1f1;
        width:100%;
        //height:.666667rem;
        line-height :.666667rem;
        font-family:PingFangSC-Regular;
        font-size:.346667rem;
        color:#a2a2a2;
        letter-spacing:.0096rem;
    }
    .linebox{
        width :100%;
        height :1.2rem;
        line-height :1.2rem;
        padding :0 .266667rem;
        background-color :#fff;
        border-bottom :.026667rem solid #f1f1f1;
        position :relative;
        .name{
            float :left;
            //width :2.026667rem;
            width :20%;
            font-weight :bold;
            font-family:PingFangSC-Medium;
            font-size:.373333rem;
            color:#494949;
            letter-spacing:0;
            text-align:left;
        }
        input{
            float :left;
            //width :7.333333rem;
            width :80%;
            height :100%;
            font-family:PingFangSC-Regular;
            font-size:.373333rem;
            letter-spacing:0;
            text-align:left;
        }
        .jiantou{
            width :.16rem;
            position:absolute;
            top:50%;
            right :.266667rem;
            margin-top:-0.08rem;
        }
    }
    .submit{
        position :fixed;
        bottom :0;
        width :100%;
        height :1.173333rem;
        line-height :1.173333rem;
        background-color :#cb9c57;
        font-family:PingFangSC-Medium;
        font-size:.4rem;
        color:#ffffff;
        letter-spacing:.0056rem;
        text-align:center;
    }
    input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
        color: #b5b5b5;
    }
    input:-moz-placeholder, textarea:-moz-placeholder {
        color: #b5b5b5;
    }
    input:-ms-input-placeholder, textarea:-ms-input-placeholder {
        color: #b5b5b5;
    }
}
</style>
<style>
#addcard .van-picker__cancel,#addcard .van-picker__confirm ,#addcard .van-picker__title{
    font-size:15px;
}
</style>

